<template>
	<!-- <u-picker
		v-model="isShow"
		mode="multiSelector"
		:range="list"
		range-key="name"
		@confirm="confirm"
		title="选择地址"
	></u-picker> -->
	<u-picker
		ref="uPicker"
		:show="isShow"
		:columns="list"
		keyName="name"
		@confirm="confirm"
		@cancel="isShow = false"
		@change="changeHandler"
	>
	</u-picker>
</template>

<script>
	export default {
		name: 'WanlAddressPicker',
		data() {
			return {
				isShow: false,
				isShowMask: false,
				list: [],
				allList: []
			};
		},
		created() {
			uni.request({
			    url: `${this.$wanlshop.config('appurl')}/wanlshop/common/area`,
			    success: (res) => {
					if(res.data.data.length > 0){
						let listCol0 = res.data.data;
						let listCol1 = res.data.data[0].city;
						let listCol2 = res.data.data[0].city[0].area;
						this.list = [listCol0, listCol1, listCol2];
						this.allList = res.data.data ? JSON.parse(JSON.stringify(res.data.data)) : [];
						// this.list = res.data.data.map(city => {
						// 	let copyCity = city ? JSON.parse(JSON.stringify(city)) : {};
						// 	copyCity.area = city.city;
						// 	return copyCity;
						// });
					}else{
						this.$wanlshop.msg('数据表area为空，请在后台安装示例插件')
					}
			    }
			});
		},
		mounted() {
			// this.changeIndicator(0)
		},
		methods:{
			show(){
				this.isShow = true
			},
			hidden() {
				this.isShow = false
			},
			confirm(e) {
				if(e.value && e.value.length > 0) {
					let eLabels = e.value.map(item => item.name);
					uni.request({
					    url: 'https://restapi.amap.com/v3/geocode/geo',
					    data: {
					        address: eLabels.join(''),
							key: this.$wanlshop.config('amapkey')
					    },
					    success: (res) => {
							console.log(res.data,'geocodes')
							let geocodes = res.data.geocodes[0];
							if(geocodes.province === '台湾省'){
								geocodes.province = eLabels[0];
								geocodes.city = eLabels[1];
								geocodes.district = eLabels[2];
								geocodes.formatted_address = eLabels.join('');
							}
							this.$emit("selectAddress", geocodes);
							this.isShow = false;
					    }
					});
				}				
			},
			changeHandler(e) {
			    const {
			        columnIndex,
			        value,
			        values, // values为当前变化列的数组内容
			        index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
			        picker = this.$refs.uPicker
			    } = e
				console.log('e', columnIndex,value,values, index)
			    // 当第一列值发生变化时，变化第二列(后一列)对应的选项
				let citys, areas;
			    if (columnIndex === 0) {
			        // picker为选择器this实例，变化第二列对应的选项
					citys = this.allList[index].city					
					picker.setColumnValues(columnIndex + 1, citys);
					// picker.setIndexs(columnIndex + 1, 0)
					areas = citys ? citys.find(item => item.id === values[1][0].id).area : [];
					picker.setColumnValues(columnIndex + 2, areas);
					// picker.setIndexs(columnIndex + 2, 0)
			    } else if (columnIndex === 1) {
			        // picker为选择器this实例，变化第三列对应的选项
					citys = this.allList ? this.allList.find(item => item.id === value[0].id).city : [];
					areas = citys ? citys.find(item => item.id === value[1].id).area : [];
			        picker.setColumnValues(columnIndex + 1, areas)
					// picker.setIndexs(columnIndex + 1, 0)
			    }
			},
		}
	}
</script>

<style lang="scss">
// 不换行

</style>
